<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格与表单示例</title>
</head>
<body>
    <h2>3. 表格</h2>
    <!-- 表格，border="1"仅为演示加边框，实际用CSS美化 -->
    <table border="1">
        <!-- 表格标题 -->
        <caption>学生信息表</caption>
        <thead>
            <!-- 表头行 -->
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>专业</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表体数据行 -->
            <tr>
                <td>2021001</td>
                <td>小明</td>
                <td>计算机科学</td>
            </tr>
            <tr>
                <td>2021002</td>
                <td>小红</td>
                <td>软件工程</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表脚，colspan="3"合并3列 -->
            <tr>
                <td colspan="3">注：此为示例数据</td>
            </tr>
        </tfoot>
    </table>

    <h2>4. 表单</h2>
    <!-- 表单，action指定提交地址，method为POST提交方式 -->
    <form action="/submit-form" method="POST">
        <fieldset>
            <legend>用户登录</legend>
            <label for="username">用户名：</label>
            <!-- 文本输入框，required表示必填 -->
            <input type="text" id="username" name="username" required placeholder="请输入用户名"><br><br>

            <label for="password">密码：</label>
            <!-- 密码输入框，输入内容隐藏 -->
            <input type="password" id="password" name="password" required><br><br>

            <label for="avatar">上传头像：</label>
            <!-- 文件上传输入框，仅允许图片类型 -->
            <input type="file" id="avatar" name="avatar" accept="image/*"><br><br>

            <label for="country">国家：</label>
            <!-- 下拉选择框 -->
            <select id="country" name="country">
                <option value="">--请选择--</option>
                <option value="China">中国</option>
                <option value="USA">美国</option>
            </select><br><br>

            <label>性别：</label>
            <!-- 单选按钮 -->
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label><br><br>

            <label>兴趣（可多选）：</label><br>
            <!-- 复选框 -->
            <input type="checkbox" id="coding" name="hobbies" value="coding">
            <label for="coding">编程</label>
            <input type="checkbox" id="music" name="hobbies" value="music">
            <label for="music">音乐</label>
            <input type="checkbox" id="sports" name="hobbies" value="sports">
            <label for="sports">运动</label><br><br>

            <label for="message">个人简介：</label><br>
            <!-- 文本域，可输入多行文本 -->
            <textarea id="message" name="message" rows="4" cols="40" placeholder="介绍一下你自己..."></textarea><br><br>

            <!-- 提交按钮、重置按钮、普通按钮 -->
            <button type="submit">提交</button>
            <button type="reset">重置</button>
            <button type="button" onclick="alert('Hello!')">普通按钮</button>
        </fieldset>
    </form>
</body>
</html>